<template>
	<div class="main">
		<div style="position: absolute; color: #fff; font-size: 28px" class="info">
			<div>
				{{ $t('main.lubricatingOil') }} :
				<span>
					{{
						isEmptyToCharacter(
							rightOrLeftdata(
								allData?.left_main?.z133.currentValue,
								allData?.right_main?.z233.currentValue
							)
						)
					}}
					℃
				</span>
				<span style="margin: 0 20px"></span>
				<span>
					{{
						isEmptyToCharacter(
							rightOrLeftdata(
								allData?.left_main?.z117.currentValue,
								allData?.right_main?.z217.currentValue
							)
						)
					}}
					bar
				</span>
			</div>
			<div>
				{{ $t('main.coolingWater') }} :
				<span>
					{{
						isEmptyToCharacter(
							rightOrLeftdata(
								allData?.left_main?.z134.currentValue,
								allData?.right_main?.z234.currentValue
							)
						)
					}}
					℃
				</span>
				<span style="margin: 0 20px"></span>
				<span>
					{{
						isEmptyToCharacter(
							rightOrLeftdata(
								allData?.left_main?.z118.currentValue,
								allData?.right_main?.z218.currentValue
							)
						)
					}}
					bar
				</span>
			</div>
			<div>
				{{ $t('main.dieselConsumptionRate') }} :
				<span>
					{{
						isEmptyToCharacter(
							rightOrLeftdata(
								allData?.left_main?.z111.currentValue,
								allData?.right_main?.z211.currentValue
							)
						)
					}}
					L/hour
				</span>
			</div>
			<div>
				{{ $t('main.gasConsumptionRate') }} :
				<span>
					{{
						isEmptyToCharacter(
							rightOrLeftdata(
								allData?.left_main?.z114.currentValue,
								allData?.right_main?.z214.currentValue
							)
						)
					}}
					L/hour
				</span>
			</div>
			<div>{{ $t('main.operationMode') }}</div>
		</div>
		<Gauge
			:value="
				rightOrLeftdata(
					HEXtoDEC(allData?.left_main?.z102.currentValue),
					HEXtoDEC(allData?.right_main?.z202.currentValue)
				)
			"
			:min="-300"
			:max="300"
			:text="$t('main.tailshaftSpeed')"
			style="position: absolute; left: 50%; z-index: 10"></Gauge>
		<Gauge
			:value="
				rightOrLeftdata(
					allData?.left_main?.z103.currentValue,
					allData?.right_main?.z203.currentValue
				)
			"
			:min="0"
			:max="60000"
			:text="$t('main.superchargerSpeed')"
			style="position: absolute; left: 20%; z-index: 10"></Gauge>
		<Gauge
			:value="
				rightOrLeftdata(
					allData?.left_main?.z101.currentValue,
					allData?.right_main?.z201.currentValue
				)
			"
			:min="0"
			:max="1000"
			:text="$t('main.hostSpeed')"
			style="position: absolute; z-index: 10; left: 35%"></Gauge>
		<!--   background: url("@/assets/image/hostEngineMain.png") no-repeat;
  background-position: right bottom;
  background-size: 1500px auto; -->
		<div class="enginebj">
			<div class="wrap">
				<div class="wrap-box">
					<div class="chimney-mask"></div>
					<div class="chimney-box">
						<div class="chimney">
							<div
								:class="{
									smoke: true,
									paused: !(hostRunningStatus(1) || hostRunningStatus(0))
								}"></div>
							<div
								:class="{
									smoke: true,
									big: true,
									paused: !(hostRunningStatus(1) || hostRunningStatus(0))
								}"></div>
						</div>
					</div>
					<div class="propeller-mask"></div>
					<div class="propeller-box">
						<div class="propeller">
							<div
								:class="{
									'paddle-left': true,
									paused: !(hostRunningStatus(1) || hostRunningStatus(0))
								}"></div>
							<div class="paddle-shaft"></div>
							<div
								:class="{
									'paddle-right': true,
									paused: !(hostRunningStatus(1) || hostRunningStatus(0))
								}"></div>
						</div>
					</div>

					<!-- <CardData title="11" ></CardData> -->
					<!-- 排气温度 -->
					<CardBoxPointLayout top="72%" left="61.2%" :gutterX="13" :column="true">
						<template #default="{ gutterX }">
							<CardBoxPoint
								:judg-ment="true"
								:position="false"
								:gutterX="gutterX"
								:color-id="
									rightOrLeftdata(
										allData?.left_main?.z149?.state,
										allData?.right_main?.ygpqwd1?.state
									)
								"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:position="false"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z150?.state, allData?.right_main?.z250?.state)
								"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z151?.state, allData?.right_main?.z251?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z152?.state, allData?.right_main?.z252?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z153?.state, allData?.right_main?.z253?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z154?.state, allData?.right_main?.z254?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
						</template>
					</CardBoxPointLayout>

					<!-- 轴承温度 -->
					<CardBoxPointLayout top="58.7%" left="61.5%" :gutterX="9" :column="true">
						<template #default="{ gutterX }">
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z141?.state, allData?.right_main?.z241?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z142?.state, allData?.right_main?.z142?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z143?.state, allData?.right_main?.z143?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z144?.state, allData?.right_main?.z144?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z145?.state, allData?.right_main?.z245?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z146?.state, allData?.right_main?.z246?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z147?.state, allData?.right_main?.z247?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
						</template>
					</CardBoxPointLayout>

					<!-- 正倒 -->
					<!-- <CardBoxPoint
        :judg-ment="true"
        text="正"
        :text-style="{ marginRight: '5px', fontSize: '32px', color: '#fff' }"
        :color-id="hostRunningStatus(1)"
        :top="490"
        :left="847"
        :width="40"
        :height="40"
      ></CardBoxPoint>
      <CardBoxPoint
        :judg-ment="true"
        text="倒"
        :text-style="{ marginRight: '5px', fontSize: '32px', color: '#fff' }"
        :color-id="hostRunningStatus(0)"
        :top="540"
        :left="847"
        :width="40"
        :height="40"
      ></CardBoxPoint> -->
					<div class="round">
						<div
							:class="['circle']"
							:style="{
								background: colors[hostRunningStatus(1) || hostRunningStatus(0)]
							}"></div>
						<div
							:class="{
								circle_bottom: true,
								animation: hostRunningStatus(1) || hostRunningStatus(0)
							}"
							:style="{
								background: colors[hostRunningStatus(1) || hostRunningStatus(0)],
								display: hostRunningStatus(1) || hostRunningStatus(0)
							}"></div>
						<!-- 'animation' -->
						<div
							:class="{
								circle_bottom2: true,
								animation2: hostRunningStatus(1) || hostRunningStatus(0)
							}"
							:style="{
								background: colors[hostRunningStatus(1) || hostRunningStatus(0)],
								display: hostRunningStatus(1) || hostRunningStatus(0) ? 'block' : 'none'
							}"></div>
						<!-- 'animation2' -->
					</div>
					<CardBoxPointLayout top="51.7%" left="65.5%" :gutterX="15" :column="true">
						<template #default="{ gutterX }">
							<!-- 滑油温度 -->
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z129?.state, allData?.right_main?.z229?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<!-- 滑油压力 -->
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z130?.state, allData?.right_main?.z230?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<!-- 冷却水温度 -->
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z134?.state, allData?.right_main?.z234?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
							<!-- 冷却水压力 -->
							<CardBoxPoint
								:judg-ment="true"
								:color-id="
									rightOrLeftdata(allData?.left_main?.z121?.state, allData?.right_main?.z221?.state)
								"
								:position="false"
								:gutterX="gutterX"
								:width="27"
								:height="27"></CardBoxPoint>
						</template>
					</CardBoxPointLayout>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { color as colors } from '@/mixins/globalParam.js'
import { routerPush, isEmptyToCharacter } from '@/plugins/index.js'
import Gauge from '@/echarts/Gauge.vue'
import CardBoxPoint from '@/components/CardDataPoint.vue'
import CardBoxPointLayout from '@/components/CardDataPointLayout.vue'
import { HEXtoDECSymbols } from '@/utils/utils.js'
let allData = inject('allData')
let HEXtoDEC = computed(() => {
	return (hexValue) => {
		return HEXtoDECSymbols(hexValue)
	}
})
// console.log("===================11111",p);
let { meta } = useRoute()
let id = meta.id
let rightOrLeftdata = computed(() => {
	return (leftVal, rightVal) => {
		return id == 1 ? leftVal : rightVal
	}
})
// 开机转态 ,allData.left_main?.zclxdcgzyly?.currentValue
const hostRunningStatus = computed(() => {
	return (str) => {
		let zc =
			id == 1 ? allData.left_main?.z131?.currentValue : allData.right_main?.z231?.currentValue
		let dc =
			id == 1 ? allData.left_main?.z132?.currentValue : allData.right_main?.z232?.currentValue
		let point = 10
		let zcValue = zc ?? 0
		let dcValue = dc ?? 0
		if (zcValue < point && zcValue < point) return 0
		if (!str) {
			// 倒车
			if (dcValue >= point) return 2
			else return 0
		} else {
			if (zcValue >= point) return 3
			else return 0
			// 正车
		}
	}
})
</script>

<style scoped lang="scss">
.wrap-box {
	position: relative;
	width: 100%;
	height: 100%;
}
.round {
	position: absolute;
	left: 32.2%;
	top: 63%;
	padding-top: 15px;
	padding-left: 10px;
	scale: 1.2;
}
.warning {
	background-color: rgb(214, 58, 58) !important;
}
.stoping {
	background: gray !important;
}
.running {
	background-color: green !important;
}
.round div {
	background: rgba(192, 192, 192, 1);
}
// rgb(214, 58, 58)
.circle {
	width: 57px;
	height: 45px;
	z-index: 999;
	text-align: center;
	top: 20px;
	left: 16px;
	position: absolute;
}
.circle_bottom {
	background: rgba(58, 150, 225, 0.4);
	width: 60px;
	height: 50px;
	filter: alpha(opacity=40);
	position: absolute;
	top: 19px;
	left: 15px;
	display: none;
}
.circle_bottom2 {
	background: rgba(58, 150, 225, 0.2);
	// border-radius:100%;
	width: 69px;
	height: 57px;
	filter: alpha(opacity=20);
	// z-index:-110;
	position: relative;
	display: none;
}
.animation {
	-webkit-animation: twinkling 1s infinite ease-in-out;
	animation: twinkling 1s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.animation2 {
	-webkit-animation: twinkling 1s infinite ease-in-out;
	animation: twinkling 1s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@keyframes twinkling {
	0% {
		opacity: 0.2;
		filter: alpha(opacity=20);
		-webkit-transform: scale(1);
	}
	50% {
		opacity: 0.5;
		filter: alpha(opacity=50);
		-webkit-transform: scale(1.12);
	}
	100% {
		opacity: 0.2;
		filter: alpha(opacity=20);
		-webkit-transform: scale(1);
	}
}

// <div class="round">
//         <div class="circle"><a>消费进阶</a></div>
//         <div class="circle_bottom animation "></div>
//         <div class="circle_bottom2 animation2 "></div>
//     </div>

// 动画
.clPcolor {
	width: 50px;
	height: 50px;
	background-color: green;
	animation: clP 0.5s infinite;
}
@keyframes clP {
	from {
		opacity: 1;
	}
	to {
		// background-color: transparent;
		opacity: 0.1;
	}
}
.paused {
	animation-play-state: paused !important;
}

.propeller-mask {
	height: 187px;
	width: 33px;
	left: 0%;
	top: 54%;
	background-color: #2d4961;
	position: absolute;
}
.propeller-box {
	position: absolute;
	left: 0%;
	top: 54%;
	z-index: 999;
	// background-color: #fff;
	.propeller {
		position: relative;
		scale: 0.8;
		// animation: propellerAnimation duration timing-function delay iteration-count direction fill-mode;
		.paddle-left,
		.paddle-right {
			height: 90px;
			width: 34px;
			border-radius: 34px / 90px;
			background-color: #dcbe1e;
			// transform: rotateX(0deg);
			animation: propellerAnimation infinite 5s;
			animation-timing-function: linear;
		}
		.paddle-left {
			transform-origin: bottom center;
		}
		.paddle-right {
			transform-origin: top center;
		}
		.paddle-shaft {
			position: absolute;
			// z-index: -1;
			top: 50%;
			transform: translateY(-50%);
			height: 40px;
			width: 36px;
			border-bottom-left-radius: 27px;
			border-top-left-radius: 27px;
			background-color: rgb(165 41 0);
		}
	}
}
@keyframes propellerAnimation {
	0% {
		transform: rotateX(0deg);
	}
	100% {
		transform: rotateX(360deg);
	}
}
.main {
	position: relative;
	height: 85%;
	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		div {
			display: flex;
			align-items: center;
			padding: 5px 0;
		}
	}
}
// 烟雾动画
.chimney {
	width: 100px;
	height: 90px;
	// background-color: #888;
	position: relative;
}

.smoke {
	position: absolute;
	bottom: 100%;
	left: 50%; /* 调整烟雾位置 */
	width: 30px;
	height: 15px;
	border-radius: 10px;
	background-color: #cbcbcb;
	transform: translateX(-50%);
	animation: smokeAnimation 5s infinite;
}

.smoke.big {
	bottom: 140%;
	left: 50%; /* 调整烟雾位置 */
	width: 50px;
	height: 20px;
	border-radius: 10px;
	animation: smokeAnimationBig 5s infinite;
	// left: 75%; /* 调整另一个烟雾位置 */
}
.chimney-mask {
	width: 83px;
	height: 37px;
	position: absolute;
	top: 0%;
	left: 61%;
	background-color: #2d4961;
}
.chimney-box {
	position: absolute;
	top: 2%;
	left: 60%;
}
.enginebj {
	width: 100%;
	height: 100%;
	position: relative;
}
@keyframes smokeAnimation {
	0% {
		bottom: 30%;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		bottom: 100%;
		opacity: 0;
	}
}
@keyframes smokeAnimationBig {
	0% {
		bottom: -10%;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		bottom: 90%;
		opacity: 0;
	}
}
.wrap {
	position: absolute;
	bottom: 5%;
	left: 20%;
	width: 1100px;
	height: 450px;
	border-color: #000;
	background: url(/src/assets/image/hostEngineMain.png) no-repeat;
	background-position: right bottom;
	background-size: 100% 100%;
}
</style>
